<template>
  <a-modal
    title="增补数量"
    width="220px"
    :visible="visible"
    dialogClass="zero-modal"
    @cancel="handleCancel"
  >
    <div class="shk-in-number-change-modal">
       <a-input-number style="width:100%;" v-model="qty" :min="0" />
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button type="primary" key="ok" :disabled="!qty" @click="onConfirm">确认</a-button>
    </template>
  </a-modal> 
</template>

<script>
import { FoamingRuKuOrderAddOrderDetails } from '@/api/modular/main/FoamingRuKuOrderManage'
export default {
  name:'shkInNumberChangeModal',
  emits:['update:visible','callback'],
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    obj:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data(){
    return {
      qty:0
    }
  },
  watch:{
    visible:{
      immediate:true,
      handler(newV,oldV){
        if (newV!==oldV){
          this.initShow()
        }
      }
    }
  },
  methods:{
    handleCancel(){
      this.$emit('update:visible',false)
    },
    initShow(){
      this.qty = 0 
    },
    onConfirm(){
      this.$loading.show()
      this.handleUpdateAjax((f)=>{
        this.$loading.hide()
        if (f) {
          this.$message.success('操作成功！');
          this.handleCancel()
          this.$emit('callback')
        }
      })
    },
    handleUpdateAjax(callback){
      let _params = {
        id:this.obj.id,
        qty:this.qty
      }
      FoamingRuKuOrderAddOrderDetails(_params).then(()=>{
        callback(true)
      }).catch(()=>{
        callback(false)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.shk-in-number-change-modal{
  padding: 8px 16px;
}
</style>